<template>
  <div class="container">
    <!-- <MySwiper></MySwiper> -->
    <div class="main">
      <div class="left" ref="left">
        <MyBetterScroll ref="left-wrapper" class="left-wrapper">
          <template v-for="item in list">
            <section
              :key="item.id"
              style="
                height: 400px;
                background: lightblue;
                margin: 5px 0;
                border-radius: 5px;
              "
            ></section>
          </template>
        </MyBetterScroll>
      </div>
      <div class="right">
        <MyBetterScroll class="right-wrapper">
          <template v-for="item in list">
            <section
              :key="item.id"
              style="
                height: 400px;
                background: red;
                margin: 5px 0;
                border-radius: 5px;
              "
            ></section>
          </template>
        </MyBetterScroll>
      </div>
    </div>

    <TabBar></TabBar>
  </div>
</template>

<script>
// import MySwiper from '../components/my-swiper.vue'

import MyBetterScroll from '../components/my-better-scroll.vue'
import BScroll from '@better-scroll/core'
import TabBar from '../components/tab-bar.vue'
import axios from 'axios'
export default {
  components: { MyBetterScroll, TabBar },
  data() {
    return {
      list: [],
    }
  },
  mounted() {},
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await axios.get('/api/list')
      console.log('res:', res.data.data.list[0].children)
      this.list = res.data.data.list[0].children
      // console.log(document.querySelector('.left-wrapper'))
      // 需要等待数据渲染完毕再去new better-scroll
      // 数据驱动dom (有数据才能有dom,而且，数据在成为dom的时候，是需要时间的，慢，)
      // 操作dom
      // vue提供了一个api this.$nextTick 可以帮助我们立即拿到在数据循环结束之后dom
      this.$nextTick(() => {
        let bs = new BScroll('.left-wrapper', {})
        let bs2 = new BScroll('.right-wrapper', {})
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    height: 100%;
    display: flex;
  }
  .left {
    flex: 3;
    height: 100%;
    // overflow: hidden;
  }
  .right {
    flex: 7;
    height: 100%;
    // overflow: hidden;
  }
}
</style>
